<template>
	<view>
		<!-- 头部导航栏 -->
		<view style="display: flex;justify-content: space-between;align-items: center;padding: 28rpx 20rpx;position:fixed;top:0;left:0;right:0;height: 60px;z-index: 22;background-color: white;">
			<view style="display: flex;" @click="back">
				<u-icon name="arrow-left"></u-icon>
				<view>返回</view>
			</view>
			
			<view style="font-weight: bold;">
				草稿箱
			</view>
			
			<view style="display: flex;align-items: center;;padding: 10rpx 25rpx;margin: 0 10rpx;border-radius: 10rpx;box-shadow: 0 0 14px 0 #66666635;border: solid 1rpx #ddd;">
				<u-icon name="plus"></u-icon>
				<view style="margin-left: 10rpx;">
					新建图文
				</view>
			</view>
		</view>
		
		<view style="margin: 60px 10px 10px 10px;padding-top: 10rpx;">
			<view v-for="(post,index) in posts" @click="onPost">
				<view style="border-radius: 5px;overflow: hidden;margin: 20rpx 0 70rpx 0;box-shadow: 0 0 19px 1px #00000045;">
					<view style="margin: 0 20rpx;">
						<view style="display:flex;align-items: center;justify-content:space-between;margin: 20rpx 5rpx 10rpx 5rpx;font-size: 13px;">
							
							<view style="display: flex;">
								<view style="color: #888;">{{'上次发表:' + $dayjs.unix(post.content.create_time).format('MM-DD HH:mm:ss') }}</view>
								<view style="color: #888;">{{`(${$dayjs.unix(post.content.create_time).fromNow()})`}}</view>
								<!-- <view style="color: #888;margin-left: 20rpx;">{{'桔赞'}}</view> -->
							</view>
							<view style="display: flex;align-items: center;padding: 10rpx 25rpx;margin: 0 0rpx;border-radius: 10rpx;box-shadow: 0 0 14px 0 #66666635;border: solid 1rpx #ddd;">
								<u-icon name="play-right-fill" color="#00c110"></u-icon>
								<view style="margin-left: 10rpx;">
									群发
								</view>
							</view>
						</view>
						<view style="display:flex;align-items: flex-end;justify-content:space-between;margin: 10rpx 5rpx 20rpx 5rpx;font-size: 13px;">
							<view style="color: #888;">{{'创建日期:' + $dayjs.unix(post.content.create_time).format('YYYY-MM-DD HH:mm:ss')}}</view>
							<view style="color: #888;">{{'次数:' + 5}}</view>
						</view>
					</view>
					<view v-if="post.content.news_item.length > 0" style="height: 150px;overflow: hidden;display: flex;align-items: center;position: relative;">
						<image style="width: 100%;" mode="widthFix" :src="post.content.news_item[0].thumb_url"></image>
						
						<view style="display: flex;align-items: center;;position: absolute;left: 0;right: 0;top: 60%;bottom: 0;background-image: linear-gradient(0deg,#000000cc,#00000000);padding: 14rpx;overflow: hidden;">
							<view style="color: white;font-weight: bold;font-size: 15px">
								{{post.content.news_item[0].title}}
							</view>
						</view>
					</view>
					
					<view v-for="(news_item,i) in subs(post.content.news_item)" style="display: flex;padding: 30rpx 20rpx;">
						<view style="flex: 1;font-weight: bold;">
							<view>{{$dayjs.unix(post.content.create_time).format('YYYY-MM-DD HH:mm:ss')}}</view>
							<view>{{news_item.title}}</view>
						</view>
						<view style="overflow: hidden;">
							<image style="width: 60px;height: 60px;" mode="scaleToFill" :src="news_item.thumb_url"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		async onLoad(){
			let res = this.$localStorage.getItem('posts') 
			
			if(!res)
			{
				 res = await this.$http.get('/common/wx/get_published_list')
				 this.$localStorage.setItem('posts',res)
			}
			
			this.posts = res.data.item
			
			console.log(this.posts)
		},
		computed:{
			subs(){
				return (news_item)=>{
					console.log(news_item)
					if(news_item.length > 0)
					{
						const ss = news_item.slice(1)
						console.log(ss)
						return  ss
					}else{
						return []
					}
				}
			}
		},
		data() {
			return {
				posts:[]
			}
		},
		methods: {
			back(){
				uni.navigateBack()
			},
			onPost(){
				console.log('................')
				uni.navigateTo({
					url: '/pages/job/publish/job-offices/post-view'
				})
			}
		}
	}
</script>

<style>

</style>
